<template>
  <div class="home_page">
    <div class="banner">
      <img src="../assets/images/banner.png" alt="">
    </div>
    <div class="jingpin">
      <div class="jingpin_top">
        <div class="l">
          <img class="jingpin_img" src="../assets/images/jingpin.png" alt="">
          <span>精品推荐</span>
        </div>
        <div>
          <span>更多</span>
          <span><img src="../assets/images/arrow.png" alt=""></span>
        </div>
      </div>
      <ul class="product_list">
        <li v-for="(item, index) in jingpin" :key="item.id">
          <img :src="'http://sc.wolfcode.cn' + item.coverImg" alt="">
          <div class="bottom">
            <div class="title">{{ item.name }}</div>
            <div class="integral">{{ item.coin }}积分</div>
            <div class="exchange">立即兑换</div>
          </div>
        </li>
      </ul>
    </div>

    <div class="hot_exchange">
      <div class="hot_exchange_top">
        <div class="l">
          <img class="hot_exchange_img" src="../assets/images/hot.png" alt="">
          <span>热门兑换</span>
        </div>
        <div>
          <span>更多</span>
          <span><img src="../assets/images/arrow.png" alt=""></span>
        </div>
      </div>
      <img src="../assets/images/exchange.png" alt="">
      <ul class="product_list">
        <li v-for="(item, index) in hotExchange" :key="item.id">
          <img :src="'http://sc.wolfcode.cn' + item.coverImg" alt="">
          <div class="bottom">
            <div class="title">{{ item.name }}</div>
            <div class="integral">{{ item.coin }}积分</div>
            <div class="exchange">立即兑换</div>
          </div>
        </li>
      </ul>
    </div>

    <div class="Strategy">
      <div class="Strategy_top">
        <img class="Strategy_img" src="../assets/images/score.png" alt="">
        <span>积分攻略</span>
      </div>
      <ul class="Strategy_list">
        <li>
          <img src="../assets/images/bottom1.png" alt="">
        </li>
        <li>
          <img src="../assets/images/bottom2.png" alt="">
        </li>
        <li>
          <img src="../assets/images/bottom3.png" alt="">
        </li>
        <li>
          <img src="../assets/images/bottom4.png" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import { jingpinApi, hotExchangeApi } from "@/request/api"
export default {
  name: 'HomeView',
  data() {
    return {
      jingpin: [],
      hotExchange: []
    }
  },
  created() {
    // let res = await jingpinApi

    jingpinApi().then((res) => {
      console.log(res);
      if (res.code === 0) {
        this.jingpin = res.data.data.records
      }
    })
    hotExchangeApi().then(res => {
      if (res.code === 0) {
        this.hotExchange = res.data.data.records
      }
    })
  },
  components: {

  }
}
</script>
<style lang = "less" scoped>
.home_page {
  width: 1200px;
  // height: 1500px;
  padding-bottom: 47px;
  margin: auto;
  // background-color: aqua;

  .banner {
    width: 1200px;
    height: 446px;
    background-color: pink;
  }

  .jingpin {
    width: 1200px;
    // height: 489px;
    padding-top: 50px;
    padding-bottom: 20px;
    // background-color: pink;

    .jingpin_top {
      width: 1200px;
      height: 60px;
      line-height: 60px;
      // background-color: skyblue;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      .l{
        .jingpin_img{
          width: 34px;
          height: 38px;
          vertical-align:middle;
        }
      }

    }

    .product_list {
      display: flex;
      justify-content: space-between;

      .bottom {
        width: 285px;
        height: 162px;
        // background: skyblue;
        text-align: center;
        padding-top: 20px;

        // display: flex;
        // flex-direction: column;
        // align-content: space-between;
        .title {
          // margin-top: 40px;
        }

        .integral {
          margin-top: 20px;
          color: red;
        }

        .exchange {
          margin-top: 20px;
        }
      }
    }
  }
// 热门兑换
  .hot_exchange {
    width: 1200px;
    // height: 1112px;

    .hot_exchange_top {
      width: 1200px;
      height: 60px;
      line-height: 60px;
      // background-color: green;
      display: flex;
      justify-content: space-between;

      .l {
        .hot_exchange_img {
          width: 34px;
          height: 38px;
          vertical-align:middle;
        }
      }
    }

    .product_list {
      display: flex;
      justify-content: space-between;
      // align-content: spa;
      align-content: space-between;
      flex-wrap: wrap;

      .bottom {
        width: 285px;
        height: 162px;
        background: skyblue;
        text-align: center;
        padding-top: 20px;

        // display: flex;
        // flex-direction: column;
        // align-content: space-between;
        .title {
          // margin-top: 40px;
        }

        .integral {
          margin-top: 20px;
          color: red;
        }

        .exchange {
          margin-top: 20px;
        }
      }
    }
  }
// 积分攻略
  .Strategy {

    padding-top: 40px;

    .Strategy_img {
      width: 41px;
      height: 38px;
      vertical-align: middle;
    }

    .Strategy_list {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>